<template>
  <a-modal
    :visible="visible"
    :title="title"
    :backData="editContent"
    :openType="openType"
    @cancel="clickCancel()"
    @ok="clickConfirm()"
    width="650px"
    :ok-button-props="{ props: { disabled: stateInput } }"
  >
    <a-form-model
      :rules="rules"
      ref="ruleForm"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item :label="$t('all.autotext363')">
        <span>{{ $t('all.autotext1273') }}</span>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext735')" prop="orgName">
        <a-input v-model="form.orgName" :disabled="stateInput" :placeholder="$t('all.autotext354')" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext651')" prop="orgCode">
        <a-input v-model="form.orgCode" :disabled="stateInput" :placeholder="$t('all.autotext83')"> </a-input>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext572')" prop="englishName">
        <a-input v-model="form.englishName" :disabled="stateInput" :placeholder="$t('all.autotext1305')" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext692')" prop="shortName">
        <a-input v-model="form.shortName" :disabled="stateInput" :placeholder="$t('all.autotext1355')" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext275')" prop="address">
        <a-input v-model="form.address" :disabled="stateInput" :placeholder="$t('all.autotext197')" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext647')" prop="contacts">
        <a-input v-model="form.contacts" :disabled="stateInput" :placeholder="$t('all.autotext1023')" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext1042')" prop="phone">
        <a-input v-model="form.phone" :disabled="stateInput" :placeholder="$t('all.autotext1122')" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext1062')" prop="email">
        <a-input v-model="form.email" :disabled="stateInput" :placeholder="$t('all.autotext1179')" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
export default {
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    business: {
      type: Array,
      default: () => []
    },
    editContent: {
      type: Object,
      default: () => {}
    },
    openType: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 15 },
      title: this.$t('all.autotext754'), // 动态标题
      stateInput: false, // 动态输入框状态
      form: {},
      rules: {
        orgName: [{ required: true, trigger: 'change', message: this.$t('all.autotext987') }],
        orgCode: [{ required: true, trigger: 'change', message: this.$t('all.autotext520') }],
        address: [{ required: false, trigger: 'change', message: this.$t('all.autotext258') }],
        phone: [
          { required: false, message: this.$t('all.autotext33') },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: this.$t('all.autotext140') }
        ],
        applyName: [{ required: false, trigger: 'change', message: 'change' }],
        englishName: [{ required: false, trigger: 'change', message: 'change' }],
        shortName: [{ required: false, trigger: 'change', message: 'change' }],
        contacts: [{ required: false, trigger: 'change', message: 'change' }],
        email: [{ required: false, trigger: 'change', message: 'change' }],
        orgType: [{ required: true, trigger: 'change', message: this.$t('all.autotext1041') }]
      }
    }
  },
  mounted () {
    if (this.editContent.id != null) {
      this.form = this.editContent
    }
  },
  watch: {
    business (val) {
      this.business = val
    },
    visible (newv) {
      if (newv === true) {
        this.form = this.openType === 0 ? {} : this.editContent
      }
      if (this.openType === 0) {
        this.stateInput = false
        this.title = this.$t('all.autotext409')
      } else if (this.openType === 1) {
        this.stateInput = false
        this.title = this.$t('all.autotext919')
      } else {
        this.stateInput = true
        this.title = this.$t('all.autotext822')
      }
    }
  },
  methods: {
    clickConfirm () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const target = this.business.find(item => item.metaCode === '100010044')
          this.form.orgType = target.id
          this.$emit('modalOk', this.form)
        } else {
          return false
        }
      })
    },
    clickCancel () {
      this.$emit('modalCancel')
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>
